<template>
  <div class="component__chapter-cell">
    <van-collapse-item
      :class="!item1.children || item1.children.length == 0 ? 'no-arrow' : null"
      v-for="(item1, index1) in datas"
      :key="index1"
      :name="item1.id"
    >
      <template #title>
        <div
          :class="[
            'title',
            current && current.id && current.id == item1.id ? 'current' : null
          ]"
          @click="pushRouter(item1)"
        >
          <div
            :class="[
              'live',
              item1.children && item1.children.length > 0 ? 'not-cd' : null
            ]"
          >
            <img
              src="~/static/img/live.gif"
              v-show="current && current.id && current.id == item1.id"
            />
          </div>
          <div class="title-name">
            <div class="name-box">
              {{ item1.chapterName
              }}<span class="icon-mark" v-if="item1.isJump == 1">试听</span>
            </div>
          </div>
        </div>
      </template>
      <chapter-tree
        v-if="item1.children && item1.children.length > 0"
        :datas="item1.children"
        :current="current"
      ></chapter-tree>
    </van-collapse-item>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getVideoUrl } from "~/api/task";

export default {
  name: "ChapterTree",
  props: ["datas", "current"],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      kl_md(state) {
        return state.kl_md;
      },
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      }
    }),
    courseId() {
      return this.$route.query.id;
    }
  },
  watch: {},
  methods: {
    async pushRouter(item) {
      if (item.children && item.children.length > 0) {
        return;
      }
      // 保留阿里云直播,跳转到指定的直播地址
      if ((item.isLive == 1 || item.isLive == 4) && item.videoInfo) {
        // console.log(item); // 直播id
        let result = await getVideoUrl(item.videoInfo.id);
        // console.log(data);
        if (result && result.data && result.data.code == 200) {
          let newTab = window.open("_blank");
          newTab.location.href = result.data.data.liveUrl;
        } else if (result && result.data && result.data.code == 1001) {
          this.$Message.error(result.data.msg);
        } else {
          this.$Message.error("数据请求失败");
        }
        // 拦截加载项和阻止函数
        this.SET_IS_LOADING(false);
        return;
      } else if (item.isLive == 2 && item.videoInfo) {
        this.$toast("小班课暂不支持在在手机上观看");
        return;
      }
      if (this.token && Object.keys(this.user_info).length > 0) {
        this.$router.replace({
          path: "",
          query: {
            id: this.courseId,
            chapterId: item.id
          }
        });
      } else {
        this.$dialog
          .confirm({
            title: "提示",
            message: "您尚未登录，请先登录再观看哟！"
          })
          .then(() => {
            this.$router.replace("/m/login");
          })
          .catch(() => {
            return false;
          });
      }
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  align-items: center;
  .title-name {
    flex: 1;
    .name-box {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      .icon-mark {
        display: inline-block;
        margin-left: 0.1rem;
        position: relative;
        white-space: nowrap;
        color: var(--theme-color);
        padding: 0 0.05rem;
        line-height: 0.3rem;
        transform: scale(0.9);
        border: 1px solid var(--theme-color);
      }
    }
  }
}
.live {
  margin-right: 0.16rem;
  display: inline-block;
  width: 0.36rem;
  height: 0.36rem;
  > img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.not-cd {
  display: none;
}
.current {
  // font-size: 0.26rem;
  color: var(--theme-color);
  .live {
    background-color: var(--theme-color);
  }
}
</style>
<style lang="scss">
.component__chapter-cell {
  .van-cell {
    padding: 0.15rem 0.3rem;
  }
  .van-collapse-item__wrapper {
    padding-left: 0.26rem !important;
  }
}
</style>
